<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top">
        <div class="top-box">
            <div class="top-nav-list">
                <ul>
                    <li>帮助中心</li>
                    <li>收藏</li>
                    <li>360官网</li>
                    <li>360智慧生活</li>
                </ul>
            </div>
            <div class="top-user-box">
                <div class="loginAndRegister">
                    <a href="./login.html">登录</a>
                    <a href="./register.html">注册</a>
                </div>
                <div class="cart-box">
                    <a href="./shoppingCart.html" class="iconfont icon-gouwudai"></a>
                </div>     
            </div>
        </div>
    </div>
    <!-- 头部 -->
    <div class="head"> 
        <div class="head-box clearfix">
            <div class="logo-box"><a href="./index2.html"></a></div>
            <div class="nav-box">
                <ul>
                    <li><a href="">新品推荐</a></li>
                    <li><a href="">热卖榜单</a></li>
                </ul>
            </div>
            <div class="search-box">
                <div class="search-bar">
                    <input type="text" class="search-ipt">
                    <div class="big-search"></div>
                </div>
                <div class="search-text">
                    <ul>
                        <li>记录仪</li>
                        <li>摄像机</li>
                        <li>路由器</li>
                        <li>耳机</li>
                        <li>扫地机</li>
                        <li>智能手表</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <!-- 轮播区域 -->
    <div class="banner">
        <!-- 轮播图 -->
        <div class="banner-box">
            <ul>
                <li><a href=""><img src="./images/banner01.webp" alt=""></a></li>
                <li><a href=""><img src="./images/banner02.webp" alt=""></a></li>
                <li><a href=""><img src="./images/banner03.webp" alt=""></a></li>
                <li><a href=""><img src="./images/banner04.webp" alt=""></a></li>
                <li><a href=""><img src="./images/banner05.webp" alt=""></a></li>

            </ul>
            <ol>
        
            </ol>
            <a href="" class="leftBtn slide"></a>
            <a href="" class="rightBtn slide"></a>
        </div>
        <!-- 选项卡 -->
        <div class="category-box">
            <p class="item-all"><a href="./productlist.html" style="color: #FFF;">全部</a></p>
            <ul class="item-box">
                <li>家庭安防</li>
                <li>安全路由</li>
                <li>智能手表</li>
                <li>汽车用品</li>
                <li>扫地机器人</li>
                <li>影音生活</li>
                <li>生态产品</li>
            </ul>
            <div class="right-box">
                <ol class="right-wrapper">
                    <li>
                        <div class="level-box">
                            <p><img src="./images/category01.webp" alt=""></p> 摄像头
                        </div>
                        <div class="level-box">
                            <p><img src="./images/category02.webp" alt=""></p> 门铃
                        </div>
                        <div class="level-box">
                            <p><img src="./images/category03.webp" alt=""></p> 存储卡
                        </div>
                        <div class="level-box">
                            <p><img src="./images/category04.webp" alt=""></p> 云录卡
                        </div>
                        <div class="level-box">
                            <p><img src="./images/category05.webp" alt=""></p> 配件
                        </div>
                    </li>
                    <li>
                        <div class="level-box">
                            <p><img src="https://p4.ssl.qhimg.com/t01eced31e1fcaa88a5.webp" alt=""></p> 路由器
                        </div>
                    </li>
                    <li>
                        <div class="level-box">
                            <p><img src="https://p2.ssl.qhimg.com/t01302f09dd5f95f197.webp" alt=""></p> 智能手表
                        </div>
                        <div class="level-box">
                            <p><img src="https://p3.ssl.qhimg.com/t011f6f0d83cca03b89.webp" alt=""></p> 配件
                        </div>
                    </li>
                    <li>
                        <div class="level-box">
                            <p><img src="https://p0.ssl.qhimg.com/t01e702a604cb3fd77a.webp" alt=""></p> 记录仪
                        </div>
                        <div class="level-box">
                            <p><img src="https://p0.ssl.qhimg.com/t016556fb82ca2418ef.webp" alt=""></p> 安全座椅
                        </div>
                        <div class="level-box">
                            <p><img src="https://p0.ssl.qhimg.com/t0175fe4b6d168dc8c3.webp" alt=""></p> 胎压监测
                        </div>
                        <div class="level-box">
                            <p><img src="https://p3.ssl.qhimg.com/t01b9d21e5df924ae5c.webp" alt=""></p> 存储卡
                        </div>
                        <div class="level-box">
                            <p><img src="https://p3.ssl.qhimg.com/t01489c5de834ace308.webp" alt=""></p> 配件
                        </div>
                    </li>
                    <li>
                        <div class="level-box">
                            <p><img src="https://p4.ssl.qhimg.com/t012e56acec4dba8ef1.webp" alt=""></p> 摄像头
                        </div>
                        <div class="level-box">
                            <p><img src="https://p2.ssl.qhimg.com/t01fa592def38519950.webp" alt=""></p> 门铃
                        </div>
                        <div class="level-box">
                            <p><img src="https://p3.ssl.qhimg.com/t01b9d21e5df924ae5c.webp" alt=""></p> 存储卡
                        </div>
                        <div class="level-box">
                            <p><img src="https://p2.ssl.qhmsg.com/dr/180_180_/t01ca885c0d9f8d3d54.webp" alt=""></p> 云录卡
                        </div>
                        <div class="level-box">
                            <p><img src="https://p1.ssl.qhimg.com/t011aaa597207d8cfff.webp" alt=""></p> 配件
                        </div>
                    </li>
                    <li>
                        <div class="level-box">
                            <p><img src="https://p4.ssl.qhimg.com/t018697979488b68fa3.webp" alt=""></p> 无线耳机
                        </div>
                        <div class="level-box">
                            <p><img src="https://p3.ssl.qhimg.com/t01a1b05a4db639487e.webp" alt=""></p> 运动耳机
                        </div>
                    </li>
                    <li>
                        <div class="level-box">
                            <p><img src="https://p4.ssl.qhimg.com/t01dc794479a475edcd.webp" alt=""></p> 平衡车
                        </div>
                        <div class="level-box">
                            <p><img src="https://p0.ssl.qhimg.com/t012e792aedceda1472.webp" alt=""></p> 手写板
                        </div>
                        <div class="level-box">
                            <p><img src="https://p0.ssl.qhimg.com/t01a95eb063af2d05c5.webp" alt=""></p> 其他
                        </div>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <!-- 内容区域一 -->
    <div class="content-top">
        <div class="container-top">
            <div class="container-top-text">热门活动</div>
            <div class="middle-box">
                <a href=""><img src="./images/content-top01.jfif" alt=""></a>
                <a href=""><img src="./images/content-top02.jfif" alt=""></a>
                <a href=""><img src="./images/content-top03.jfif" alt=""></a>
                <a href=""><img src="./images/content-top04.jfif" alt=""></a>
            </div>
            <div class="bottomImg-box">
                <a href=""></a>
            </div>
        </div>
    </div>
    <!-- 内容区域二01-->
    <div class="content-top-tow">
        <div class="container-top">
            <div class="container-top-text"><span>家庭安防</span><a href="">全部&gt;&gt;</a></div>
            <div class="floor-box" name="clearfix01">
                <a href="" class="first"><img src="./images/index/content-top01.jpg" alt=""></a>
                
            </div>
            <div class="bottomImg-box">
                <a href="" class="one"></a>
            </div>
        </div>
    </div>
    <!-- 内容区域二02-->
    <div class="content-top-tow">
        <div class="container-top">
            <div class="container-top-text"><span>行车安全</span><a href="">全部&gt;&gt;</a></div>
            <div class="floor-box" name="clearfix02">
                <a href="" class="first"><img src="./images/index/content-top02.jpg" alt=""></a>
            </div>
            <div class="bottomImg-box">
                <a href="" class="tow"></a>
            </div>
        </div>
    </div>
    <!-- 内容区域二03-->
    <div class="content-top-tow">
        <div class="container-top">
            <div class="container-top-text"><span>扫地机器人</span><a href="">全部&gt;&gt;</a></div>
            <div class="floor-box" name="clearfix03">
                <a href="" class="first"><img src="./images/index/content-top03.jpg" alt=""></a>
            </div>
            <div class="bottomImg-box">
                <a href="" class="three"></a>
            </div>
        </div>
    </div>
    <!-- 内容区域二04-->
    <div class="content-top-tow">
        <div class="container-top">
            <div class="container-top-text"><span>智能守护</span><a href="">全部&gt;&gt;</a></div>
            <div class="floor-box" name="clearfix04">
                <a href="" class="first"><img src="./images/index/content-top04.jpg" alt=""></a>
            </div>
            <div class="bottomImg-box">
                <a href="" class="four"></a>
            </div>
        </div>
    </div>
    <!-- 内容区域二05-->
    <div class="content-top-tow">
        <div class="container-top">
            <div class="container-top-text"><span>安全路由</span><a href="">全部&gt;&gt;</a></div>
            <div class="floor-box" name="clearfix05">
                <a href="" class="first"><img src="./images/index/content-top05.jpg" alt=""></a>
            </div>
            <div class="bottomImg-box">
                <a href="" class="five"></a>
            </div>
        </div>
    </div>
    <!-- 内容区域二06-->
    <div class="content-top-tow">
        <div class="container-top">
            <div class="container-top-text"><span>更多商品</span></div>
            <div class="floor-box" name="clearfix">

            </div>
            <div class="bottomImg-box six">
                —————————&nbsp;我已经陪你到底了&nbsp;—————————
            </div>
        </div>
    </div>
    <!-- 网页商城简介区域 -->
    <div class="helper-floor">
        <div class="footer-box mod-helper clearfix">
            <div class="helper-box about-box">
                <p class="helper-title">关于商城</p>
                <p class="helper-text"> 360商城是奇虎360公司的官方电商平台，主要经营360安全智能设备，以及相关领域消费品。提供最新的360智能设备，最贴心的售后服务，360社区一手评测资讯，享受360安全、安心、放心的购物体验。 </p>
                <div class="follow-box">
                    <span class="follow-btn"> 关于我们 </span>
                    <span class="index-icon icon-weixin"></span>
                    <a href="" class="index-icon icon-weibo"></a>
                </div>
            </div>
            <div class="helper-box lnk-box">
                <p class="helper-title">售后服务</p>
                <a href="" class="helper-text">7日无理由退货 </a>
                <a href="" class="helper-text">质量问题15日内换货</a>
                <a href="" class="helper-text">保修条款</a>
                <a href="" class="helper-text">服务流程</a>
                <a href="" class="helper-text">许可协议</a>
                <a href="" class="helper-text">隐私政策</a>
            </div>
            <div class="helper-box lnk-box">
                <p class="helper-title">帮助中心</p>
                <a href="" class="helper-text">用户注册</a>
                <a href="" class="helper-text">会员说明</a>
                <a href="" class="helper-text">登录与密码找</a>
                <a href="" class="helper-text">购买指南</a>
                <a href="" class="helper-text">支付方式</a>
                <a href="" class="helper-text">配送与说明</a>
            </div>
                <div class="helper-box contact-box">
                <p class="helper-title">联系我们</p>
                <p class="help-text big-text">400-6822-360</p>
                <p class="help-text small-text">周一至周日 9:00-18:00（仅收市话费）</p>
            </div>
        </div>
    </div>
    <!-- 网页右侧区域 -->
    <div class="mod-right-side">
        <div class="right-middle-box">
            <a href="">
                <i></i>
            </a>
            <a href="">
                <i></i>
            </a>
            <a href="">
                <i></i>
            </a>
        </div>
        <div class="right-bottom-box">
            <a href="">
                <i></i>
            </a>
            <a href="JavaScript:;">
                <i class="totop"></i>
            </a>
        </div>
    </div>
    <!-- 版权区域 -->
    <div class="copyright-floor">
        <div class="footer-box">
            <div class="service-policy-list">
                <a href="" class="policy-item">
                    <i class="index-icon"></i>
                    7天无理由退货 
                </a>
                <a href="" class="policy-item">
                    <i class="index-icon"></i>
                    15天免费换货  
                </a>
                <a href="" class="policy-item">
                    <i class="index-icon"></i>
                    满99元包邮  
                </a>
            </div>
            <div class="copyright-line">
                <p> ©2019-2021 mall.360.cn版权所有 </p>
                <p>
                    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备08010314号-6</a> <a href="/help/gongshangyingyezhizhao" target="_blank"> 营业执照 </a>
                </p>
                <p style="color:rgba(255,255,255,.5);font-size:12px">
                    公司名称：北京视觉世界科技有限公司 | 社会统一信用代码：91110105336460203N |
                    <a style="color:rgba(255,255,255,.5)" href="/help/shipinjingyingxuke" target="_blank">食品经营许可证</a>
                    <br> 公司地址：北京市朝阳区酒仙桥路6号院2号楼1至17层102号内5层501 | 联系方式：400-6822-360
                </p>
            </div>
        </div>
    </div>
</body>
<script src="./js/utils.js"></script>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="./js/index.js"></script>
<script>
//////////////////////////////首页商品数据懒加载////////////////////////////////////////////
// 获取装商品数据的div
/*var clearFix = document.querySelector('[name="clearfix"]');
console.log(clearFix)
// 正常的布局，从上向下，从左向右
// var current = 1
var flag = true
getData()
function getData() {
    if(!flag) return false
    flag = false
    // 瀑布流：从左向右，从上到下
    promiseAjax({
        url: './list.json',
        // data: {
        //     current
        // }
    }).then(res => {
        // console.log(res)
        res = JSON.parse(res)
        console.log(1111,res);
        res.forEach(item => {
            console.log(item)
            var li = `
                <a href="">
                    <div class="top-label label-orange">${item.top_label}</div>
                  <div class="item-img">
                    <img src="${item.img_big_logo}" alt="360可视门铃5MAX">
                  </div>
                  <p class="name">${item.name}</p>
                  <p class="desc" title="2.5K双摄超大视野">${item.title}</p>
                  <p class="price">
                    <span class="cur-price">${item.price.cur_price}</span>
                    <span class="old-price">${item.price.old_price}</span>
                  </p>
                </a>
            `
            console.log(li)
            clearFix.innerHTML += li
        })
        flag = true
    })
}

// 懒加载 - 监听页面的滚动事件 - 不停的获取滚动过的距离，快到页面底部时再次发送请求，获取新的数据，再次加载在页面中
// window.onscroll = function() {
//     var t = document.documentElement.scrollTop || document.body.scrollTop

//     if(t+document.documentElement.clientHeight > middleBox.offsetHeight - 100) {
//         current++
//         getData()
//     }
// }
/*
懒加载：就是监听滚动事件，滚动距离到达一定值的时候，再次发送请求渲染页面
*/
</script>
</html>